<template>
  <div class="main-container">
    <el-form inline>
      <el-form-item>
        <h1>公司工资报表</h1>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="monthRange" type="monthrange" value-format="yyyy-MM" align="right" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table border stripe :data="summaryList" :summary-method="calcSummaries" show-summary>
      <el-table-column prop="month" label="时间" align="center" width="200"></el-table-column>
      <el-table-column prop="quotaSalary" label="定额工资" align="right" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.quotaSalary.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="otherSalary" label="其余工资" align="right" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.otherSalary.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalSalary" label="合计" align="right" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.totalSalary.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showWorkerDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { getSalarySummaryReportApi } from '@/api/report/api_report_salary'

@Component({
  components: {}
})
export default class ProductionSummary extends Vue {
  monthRange: any = []
  summaryList: any = []

  /**
   * 生命周期函数：组件加载
   * 1. 数据初始化查询，默认本年初至本月
   */
  created() {
    this.initMonthRangeParam()
  }

  /**
   * 初始化本年份数据
   * 年初至本月
   */
  private initMonthRangeParam() {
    const today = new Date()
    let month = today.getMonth() + 1
    let monthStr = month < 10 ? '0' + month : month
    const end = today.getFullYear() + '-' + monthStr
    const start = today.getFullYear() + '-01'
    this.monthRange = [start, end]
    this.query()
  }

  /**
   * 异步查询方法
   * 获取报表数据
   */
  async query() {
    console.log('查询时间：' + this.monthRange)
    await getSalarySummaryReportApi({
      beginMonth: this.monthRange[0] + '-01',
      endMonth: this.monthRange[1] + '-01'
    }).then(res => (this.summaryList = res.data))
  }

  /**
   * 计算表尾行
   * 合计 定额工时与实动工时
   * 平均 定额完成率与设备开动率
   */
  calcSummaries(params) {
    const { columns, data } = params
    const sums: any = []
    columns.forEach((column, index) => {
      if (index === 0) {
        sums[index] = '合计'
        return
      }
      const values = data.map(item => Number(item[column.property]))
      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            return prev + curr
          } else {
            return prev
          }
        }, 0)
        if (index === 1 || index === 2 || index === 3) {
          sums[index] = sums[index].toFixed(2)
        }
      } else {
        sums[index] = ' '
      }
    })

    return sums
  }

  /**
   * 跳转至工人工资报表页面，
   * 初始查询时间范围为上月24日至本月23日
   */
  showWorkerDetail(row) {
    this.$router.push({
      name: 'menuA1ReportSalary',
      params: {
        from: 'salary_summary',
        month: row.month
      }
    })
  }

}
</script>

<style></style>
